/* eslint-disable prettier/prettier */
import React, { useEffect, useState } from 'react';
import { View, Text, ImageBackground, Image, ToastAndroid, TouchableOpacity } from 'react-native';
import Clipboard from '@react-native-community/clipboard';
 
const Contact = ({ navigation }) => {
  const [copied, setCopied] = useState(false);

  const copyToClipboard = async () => {
    try {
      await Clipboard.setString('乐学新天地');
      setCopied(true);
      ToastAndroid.show('复制成功', ToastAndroid.SHORT);
    } catch (error) {
      console.error('无法复制到粘贴板', error);
    }
  };

  useEffect(() => {
    // 你的effect逻辑
  }, []);

  return (
    <ImageBackground source={require('../../src/image/contact_bac.jpg')} style={styles.container}>
      <TouchableOpacity
        onPress={() => navigation.navigate('login')}
        style={{ position: 'absolute', left: '5%', top: '5%' }}
      >
        <Image source={require('../../src/image/UI/learn_button_left.png')} style={{ width: 50, height: 50 }} />
      </TouchableOpacity>
      <Text style={{ position: 'absolute', fontSize: 30, fontWeight: '500', color: 'black', top: '6%', left: '20%' }}>联系我们</Text>
      <View style={{alignItems: 'center', top: '18%', }}>
      <Text style={{ fontSize: 25,}}>24小时客服</Text>
      </View>
      <View style={{ top: '18%' }}>
        <View style={[styles.containerView, { justifyContent: 'space-between', alignItems: 'center' }]}>
          <Text>尊敬的用户您好！您在使用过程中遇到任何问题，请联系我们24小时客服微信号乐学新天地：TopStudy88，留言。</Text>
          <Text>关注微信公众号《乐学新天地》的方法如下:</Text>
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
            <Text style={{ color: 'blue', fontSize: 15, marginRight: 20 }}>乐学新天地</Text>
            <TouchableOpacity onPress={copyToClipboard}>
              <Text style={{ color: 'red', fontSize: 15 }}>复制</Text>
            </TouchableOpacity>
          </View>
          <Text>点击复制后--打开微信--打开公众号长按粘贴</Text>
          <Text>您也可以扫描以下二维码来关注微信公众号：乐学新天地</Text>
          <Image source={require('../../src/image/contact_code.png')} style={{ width: 110, height: 110, alignSelf: 'center' }} />
        </View>
      </View>
    </ImageBackground>
  );
};

const styles = {
  container: {
    flex: 1,
    // 其他样式...
  },
  containerView: {
    minHeight: '70%',
    minWidth: '80%',
    backgroundColor: '#fbede0',
    borderRadius: 10,
    marginHorizontal: '5%',
    paddingHorizontal:'15%',
    padding: '15%', // 使用padding代替marginHorizontal来保持左右边距
    // 其他样式...
  },
  // 其他样式...
};

export default Contact;